<template>
  <a-modal
    destroyOnClose
    title="链接选择器"
    :zIndex="zIndex"
    v-model="value"
    :width="700"
    okText="确认"
    cancelText="取消"
    @ok="onOk"
    @cancel="onCancel"
    :closable="false"
  >
    <a-card :bordered="false" :loading="loading">
      <a-row>
        <span>选择页面：</span>
        <a-select
          v-if="LinkList.length > 0"
          style="width: 468px"
          placeholder="选择页面"
          show-search
          :filter-option="filterOption"
          @change="handleChange"
        >
          <a-select-option v-for="(item, index) in LinkList" :key="index + ''">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-row>

      <template v-if="linkInfo && linkInfo.params && linkInfo.params.length > 0 && !linkInfo.is_merchant">
        <template v-for="(par, parIndex) in linkInfo.params">
          <template v-if="!par.hidden">
            <a-row style="margin-top: 10px" :key="parIndex" :gutter="[16, 16]" v-if="par.type == 'select'">
              <a-col :span="4" style="text-align: center">{{ par.label_name }}</a-col>
              <a-col :span="20">
                <a-select
                  style="width: 100%"
                  v-model="linkInfo.params[parIndex].value"
                  @change="(e) => selectOption(e, linkInfo)"
                >
                  <a-select-option
                    :value="optionItem.id"
                    v-for="(optionItem, optionIndex) in linkInfo.params[parIndex].options"
                    :key="optionIndex"
                  >
                    {{ optionItem.name }}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <a-row style="margin-top: 10px" :key="parIndex" :gutter="[16, 16]" v-else>
              <a-col :span="4" style="text-align: center">{{ par.key == 'cat_name' ? par.label_name : par.key }}</a-col>
              <a-col :span="20">
                <a-input v-model="linkInfo.params[parIndex].value" />
                <a-row style="margin-top: 10px">{{ par.desc }}</a-row>
              </a-col>
            </a-row>
          </template>
        </template>
      </template>
    </a-card>
  </a-modal>
</template>

<script>
import { link } from '@/api/diy/diy'
import Template from '../StorageSelect/Template.vue'
import storage from 'store'

export default {
  name: 'SelectLink',
  components: { Template },
  data() {
    return {
      LinkList: [],
      linkInfo: {},
      loading: true,
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000,
    },
    value: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: '',
    },
    isUserCenter: {
      type: Boolean,
      default: false,
    },
    isSingle: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.getList()
  },
  watch: {},
  methods: {
    getList() {
      this.loading = true
      const param = {}
      let url = '/diy/get-link'
      if (this.type && this.type != '') {
        param.type = this.type
      }

      if (this.isSingle) {
        const store_id = storage.get('storeId')
        url += `&store_id=${store_id}`
      }

      link({ url, data: param }).then((res) => {
        this.loading = false
        for (let i = 0; i < res.data.list.length; i++) {
          if (!this.isUserCenter && res.data.list[i].name == '付款码') {
            res.data.list.splice(i, 1)
          }
        }
        this.LinkList = res.data.list
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onCancel() {
      this.$emit('input', false)
      this.$emit('cancel')
    },
    onOk() {
      this.$emit('input', false)
      var param = ''
      this.linkInfo.params.forEach((element, index) => {
        if (index === 0) {
          param += element.key + '=' + element.value
        } else {
          param += '&' + element.key + '=' + element.value
        }
      })
      if (param !== '') {
        this.linkInfo.link += '?' + param
      }
      this.$emit('onOk', this.linkInfo)
    },
    handleChange(e) {
      // this.$nextTick(() => {
      let [item] = this.LinkList.filter((d, index) => {
        return index == e
      })
      this.linkInfo = item
      // });
    },
    selectOption(e, link) {
      if (link.link == '/union/class-search/index') {
        let storeLsit = link.params[0].options,
          store = storeLsit.find((el) => el.id === e)
        link.params[1].value = store.name
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.permission-form {
  >>> .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.title-but {
  margin-left: 6px;
}
</style>
